import { Component, OnInit, Input, OnChanges, SimpleChanges, ChangeDetectionStrategy } from '@angular/core';
import { WyySliderStyle } from './wyy-sider-types';

@Component({
  selector: 'app-wyy-slider-handle',
  template: `<div class="wyy-slider-handle" [ngStyle]="handleStyle"></div>`,
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class WyySliderHandleComponent implements OnInit, OnChanges {
  handleStyle: WyySliderStyle = {};
  @Input() wyyVertical = false;
  @Input() wyyOffset: number;
  constructor() { }

  ngOnInit() {
  }
  ngOnChanges(changes: SimpleChanges): void {
    if (changes.wyyOffset) {
      const direction = this.wyyVertical ? 'bottom' : 'left';
      this.handleStyle[direction] = this.wyyOffset + '%';
    }
  }
}
